<template>
	<view class="page-buy">
		<view class="head" :style="{ marginTop: statusBarHeight + 'px',height: 80 + 'rpx',lineHeight:80 + 'rpx'}">
			<view class="left" @click="back">
				<u-icon name="arrow-left" size="19" @click="goback"></u-icon>
			</view>
			<view class="center">
				研如意
			</view>
		</view>
		<view class="top">
			<view class="title">
				考研调剂天眼
			</view>
			<view class="text">
				考研调剂信息一网打尽
			</view>
		</view>
		<view class="content">
			<view class="title">
				调剂快人一步，上岸抢先一年
			</view>
			<!-- <image class="image" src="https://pic.imgdb.cn/item/675dba31d0e0a243d4e40b8e.png" mode="widthFix"></image> -->
			<view class="bottom">
				<image class="image" src="https://pic.imgdb.cn/item/675dbbb1d0e0a243d4e40ba3.png" mode="widthFix"></image>
				<view class="">
					调剂公告更新快</br>
					历史数据非常全
				</view>
				<view class="">

				</view>
			</view>
		</view>
		<view class="buy">
			<u-button type="warning" shape="circle" text="立即购买" @click="buy"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		insertMallOrder,
		cashierPay
	} from '../../utils/api.js'
	export default {
		mounted() {
			//必须放在mounted钩子函数最前面，不能放在调用其它方法后面，否则无效
			// let that = this
			// //获取手机系统信息
			const info = uni.getSystemInfoSync()
			// //设置状态栏高度
			this.statusBarHeight = info.statusBarHeight

		},
		data() {
			return {
				statusBarHeight: ''
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async buy() {
				const userInfo = uni.getStorageSync('userInfo')
				if(userInfo.paid == '1') {
					uni.showLoading({
						title: '此账号已激活'
					});
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				const res = await insertMallOrder({
					payMethod: "WECHAT",
					mallOrderGoodsList: [{
						"goodsId": 64
					}]
				})
				
				if(res.code == 200) {
					const result = await cashierPay({
						sn:res.data.sn
					})
					uni.requestPayment({
						timeStamp: result.result.timeStamp,
						nonceStr: result.result.nonceStr,
						package: result.result.package,
						signType: result.result.signType,
						paySign: result.result.paySign,
						success(result) {
							console.log('成功')
							uni.hideLoading();
						},
						fail(res) {
							uni.hideLoading();
						}
					})
				}
				// const res = await cashierPay({
				// 	sn:'20250123231311506000'
				// })
				console.log('res', res)
				// uni.requestPayment({
				// 	timeStamp: res.result.timeStamp,
				// 	nonceStr: res.result.nonceStr,
				// 	package: res.result.package,
				// 	signType: res.result.signType,
				// 	paySign: res.result.paySign,
				// 	success(res) {

				// 		console.log('成功')

				// 	},
				// 	fail(res) {
				// 		console.log('支付失败', res)
				// 	}
				// })

			}
		}
	}
</script>
<style lang="scss" scoped>
	.page-buy {
		overflow: hidden;
		min-height: 100vh;
		background: linear-gradient(to bottom, transparent, #fff 180%),
			radial-gradient(30% 1800rpx at left top, #dafab7, transparent),
			radial-gradient(100% 1800rpx at right top, #dbef55, transparent);

		.head {
			display: flex;
			align-items: center;
			position: relative;

			.left {
				position: absolute;
				left: 20rpx
			}

			.center {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			// display: flex;
			// justify-content: space-between;
		}

		.top {
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;
			width: 700rpx;
			height: 200rpx;

			// background: linear-gradient(to left right,#dee5fd, #b7e3f9);
			background: linear-gradient(to right, #dee5fd, #b7e3f9);
			border-radius: 20rpx 20rpx 0 0;
			margin: 100rpx auto 0;

			.title {
				// color: #fff;
				font-size: 40rpx;
				font-weight: 700;
			}

			.text {
				margin-top: 10rpx;
			}
		}

		.content {
			.title {
				margin-bottom: 30rpx;
				color: #ffcf49;
				font-weight: 700;
			}

			text-align: center;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 0 auto;
			width: 700rpx;
			height: 300rpx;
			border-radius: 0 0 20rpx 20rpx;
			background-color: #fff;

			.image {
				width: 200rpx;
			}

			.bottom {

				display: flex;
				justify-content: space-around;
				line-height: 60rpx;

				.title {}
			}
		}

		.buy {
			// margin-top: 100rpx;
			margin: 100rpx auto;
			width: 200rpx;
		}
	}
</style>